<template>
  <div style="width: 100%; height: 100%">
    <div class="quan">
      <div class="left">
        <p class="tou">ORDER聚造</p>
        <img src="../assets/shouyeimage/san.png" class="san" alt="" />

        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1">轮播图管理</el-menu-item>
              <el-menu-item index="1-2">分类区管理</el-menu-item>
              <el-menu-item index="1-3">为您推荐管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>首页管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">品牌管理</el-menu-item>
              <el-menu-item index="2-3">商品管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>新闻管理</span>
            </template>
          </el-submenu>
        </el-menu>
      </div>
      <div class="right">
        <div class="ding">
          <p class="taitou">系统设置 / 人员管理</p>
          <img class="touxiang" src="" alt="" />
          <el-tooltip placement="bottom">
            <div slot="content" @click="dialogFormVisible=true" class="xiugai">修改密码</div>
            <p class="guanli">{{nickName}}</p>
          </el-tooltip>
          
          <p class="mingcheng">你好！</p>
          <el-button class="tuichu" type="danger" @click="logout" round>退出</el-button>
          <!-- <div class="tuichu">
            <p class="tui">退出</p>
          </div> -->
        </div>

        <div class="saixuan">
          <label class="riqi" for="date">日期</label>
          <input
            style="height: 22px; margin-top: 18px; margin-right: 20px"
            type="datetime-local"
            name="date"
            id="datetime"
            value=""
          />
          <div class="sousuo">搜索</div>
          <div class="shanchu">删除</div>
        </div>

        <div class="dabiao">
          <table class="biao">
            <thead>
              <tr>
                <th>日期</th>
                <th>姓名</th>
                <th>地址</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>2018-3-8</td>
                <td>少年卡卡西</td>
                <td>
                  木叶村18号
                  <img
                    src="../assets/shouyeimage/bianji2x.png"
                    class="bianji"
                    alt=""
                  />
                  <img
                    src="../assets/shouyeimage/shanchu2x.png"
                    class="shanchu"
                    alt=""
                  />
                </td>
              </tr>
              <tr>
                <td>2018-6-9</td>
                <td>蜘蛛侠</td>
                <td>
                  美国
                  <img
                    src="../assets/shouyeimage/bianji2x.png"
                    class="bianji"
                    alt=""
                  />
                  <img
                    src="../assets/shouyeimage/shanchu2x.png"
                    class="shanchu"
                    alt=""
                  />
                </td>
              </tr>
              <tr>
                <td>2002-10-4</td>
                <td>宇智波鼬</td>
                <td>
                  木叶村20号
                  <img
                    src="../assets/shouyeimage/bianji2x.png"
                    class="bianji"
                    alt=""
                  />
                  <img
                    src="../assets/shouyeimage/shanchu2x.png"
                    class="shanchu"
                    alt=""
                  />
                </td>
              </tr>
              <tr>
                <td>2015-15-4</td>
                <td>黑土</td>
                <td>
                  木叶村51号
                  <img
                    src="../assets/shouyeimage/bianji2x.png"
                    class="bianji"
                    alt=""
                  />
                  <img
                    src="../assets/shouyeimage/shanchu2x.png"
                    class="shanchu"
                    alt=""
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="xia">
          <div class="zuo">
            <span class="ye">共400条</span>
            <select class="sid" onchange="selectcity()">
              <option>---请选择---</option>
              <option>100条/页</option>
              <option>200条/页</option>
              <option>300条/页</option>
              <option>400条/页</option>
            </select>
          </div>
          <div class="yema">
            <img
              class="zuojian"
              src="../assets/shouyeimage/jiantou.png"
              alt=""
            />
            <ul style="display: flex">
              <li><a class="ye" href="">1</a></li>
              <li><a class="ye" href="">2</a></li>
              <li><a class="ye" href="">3</a></li>
              <li><a class="ye" href="">4</a></li>
            </ul>
            <img
              class="youjian"
              src="../assets/shouyeimage/jiantou.png"
              alt=""
            />
            <p>前往</p>
            <input
              type="text"
              style="
                height: 20px;
                width: 40px;
                margin-top: 8px;
                margin-left: 4px;
                margin-right: 4px;
              "
            />
            <p>页</p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="原密码" prop="passWord">
          <el-input type="password" v-model="form.passWord"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input type="password" v-model="form.newPassWord"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPassWord">
          <el-input type="password" v-model="form.reNewPassWord"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import md5 from 'js-md5'
export default {
  name: "index",
  props: {
    msg: String,
  },

  data() {
    return {
      photo: "",
      nickName: "",
      dialogFormVisible:false,
      form:{
        passWord:'',
        newPassWord:'',
        reNewPassWord:''
      },
      rules:{
        passWord:[
          {required:true,message:'请输入原密码',trigger:'blur'}
        ],
        newPassWord:[
          {required:true,message:'请输入新密码',trigger:'blur'}
        ],
        reNewPassWord:[
          {required:true,message:'请重复输入密码',trigger:'blur'},
          { validator:(rule, value, callback)=>  {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.newPassWord) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
          }, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$confirm("是否退出登录?","提示", {
        confirmButtonText:"确定",
        concelButtonText:"取消",
        type:"warning",
      }).then(() => {
        this.$http({
          url:"/admin/logout",
        }).then((res) => {
          if(res.errorMsg) {
            this.$message.error(res.errorMsg);
          }else{
            console.log('sasdawdwad')
            localStorage.removeItem('token')
            localStorage.removeItem('user')
            location.href = "#/login";
            
          }
        })
      })
    },
    changePassWord(){
      this.$refs.form.validate((valid) => {
        if(valid){
          this.$http({
            url:'/admin/changePassWord',
            method:'POST',
            data:{
              passWord:md5(this.form.passWord),
              newPassWord:md5(this.form.newPassWord)
            }
          }).then(res => {
            if(!res.errorMsg){
              this.dialogFormVisible = false
              this.$message({
                messageL:'修改密码成功',
                type:'success',
                duration:3000
              });
              setTimeout(()=>{
                location.href = '#/login'
              },3000)
            }
          })
        }else{
          return false;
        }
      })
    }
  },
  created() {
    let user = localStorage.getItem("user");
    if (!user) {
      console.log(history, location);
      location.href = location.origin + "#/login";
    } else {
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avataUrl || require("../assets/dlimage/mima.png");
      //设置昵称
      this.nickName = user.nickName || "小天";
    }
  },
  mounted() {},
};
</script>

<style scoped>
@import "../assets/dlcss/reset.css";
@import "../assets/shouyecss/liebiao.css";
</style>
